function process_change() {
    var inputElem = document.getElementById("doLoadVocab");
    var baseName = inputElem.files[0].name;
    document.getElementById("fnamePreview").textContent = baseName;
}

function process_submit() {
    //TODO add a radio button with two options: 1. merge vocabulary [default]; 2. replace vocabulary
    var inputElem = document.getElementById("doLoadVocab");
    var file = inputElem.files[0];
    var reader = new FileReader();
    reader.onload = function(e) {
        var new_words = parse_vocabulary(reader.result);
        var result = add_new_words(new_words, true);
        document.getElementById("addedInfo").textContent = "Added " + result.add + " new words.";
        document.getElementById("skippedInfo").textContent = "Skipped " + result.skip + " existing words.";
    }
    reader.readAsText(file);
}

function init_controls() {
    window.onload=function() {
        localizeHtmlPage();
        document.getElementById("vocabSubmit").addEventListener("click", process_submit);
        document.getElementById("doLoadVocab").addEventListener("change", process_change);
    }
}

init_controls();
